import React from 'react'
import { withRouter, NavLink } from 'react-router-dom'
// ===================================================================== antd
import { LockOutlined, StopOutlined } from '@ant-design/icons'
// ===================================================================== image
import Logo from '@img/logo.png'
import Socket from '@utils/socket'
// ===================================================================== Declare
const { $fn, $http, $Lazy } = window
// ===================================================================== Lazy
const Page 			= $Lazy.load(()=>import('@tp/content'))
const Image 		= $Lazy.load(()=>import('@tp/image'))
const Text 			= $Lazy.load(()=>import('@tp/text'))
const Confirm 		= $Lazy.file(()=>import('@antd/common/confirm-submit'))
const PositiveModal	= $Lazy.state(()=>import('@views/testing-center/js/controls/modal/positive-modal'), 1)
// ===================================================================== private component
const height = 36
// ===================================================================== image
const LiComponent = ({ title, onClick, icon }) => (
	<li className='fxmc c0 tap cp lh' style={{width:height}} onClick={onClick}>
		<div>
			<div className='fxmc mb5'><i className={`iconfont icon${icon}`}></i></div><span>{title}</span>
		</div>
	</li>
)
let clear
// ===================================================================== component
class Frame extends React.Component{
	state = {
		user: $fn.getUser(),
		num: 0
	}
	
	root = $fn.getRoot()
	
	componentDidMount(){
		this.props.history.listen( ({pathname},action) => {
			const path = pathname.split('/')
			if(path.length === 3){
				clearTimeout(clear)
				clear = setTimeout(()=>{
					if(pathname.includes('/testing-center')){ this.getCritical() }
				})
			}
		})
		this.socket = Socket.init()
		window.frameRef = this
		$http.pull(null, 'msg-system/getNotViewCount').then(({msg_count}) => this.setState({num : msg_count}))
	}
	
	componentWillUnmount(){
		this.socket?.close?.()
	}
	
	// 获取危机值
	getCritical = () => {
		const { user } = this.state
		const param = {user_id: user.uuid, comp_id: user.comp_id}
		$http.pull(this,'ts-crisis/findone', {param,loadingText:`加载中`} ).then( (data)=> {
			if($fn.hasArray(data)){
				this.positiveModalRef.open(data)
			}
		})
	}
	
	
	render(){
		const { user, num } = this.state
		const { data, Router } = this.props
		const { root } = this.root
		return (
			<>
				<Page className='fv'>
					<header className='fxmc h40'>
						<h2 className='fxmc h bcf cp hover-o bbor1' style={{width:$fn.menuWidth}} onClick={()=>$fn.push(this,'/')}>
							<Image width='100px' src={Logo}/>
						</h2>
						<nav className='ex fxm h f13 g2 oh' id='nav'>
							{
								data.map((v,i)=>(
									 v.menu_en!=='wdglcd' && <React.Fragment key={i}>
										{ i>0 && <i style={{height:'60%', width:1, background:'#eee'}}></i>}
										<NavLink to={ root + '/' + v.path} className='fxmc plr10 rel tap nowrap fxm' activeClassName='active' >
											{
												i === 0 ? <i className={`iconfont icongongzuotai rel`} style={{marginRight:3}}></i>
														: (v.icon && <i className={`iconfont icon${v.icon} rel`} style={{marginRight:3}}></i>)
											}
											{v.title}
										</NavLink>
									</React.Fragment>
								))
							}
						</nav>
						<div className='fxm mr10'>
							{/* 头像 */}
							<Image wrap round width={36} height={36} size={36} src={user.head_portrait?(user.head_portrait.indexOf('http')===-1?user.img_domain+user.head_portrait:user.head_portrait):''} className='bor1 mt5'/>
							<dl className='ml10'>
								<dt className='nowrap'><Text value={user.real_name}/></dt>
								{/* 职位 */}
								{
									user.position && <dd className='r100px bcm cf plr5 lh18 nowrap'><Text value={user.position} /></dd>
								}
							</dl>
						</div>
						<ul className='h fx'>
							<LiComponent title='首页' onClick={()=>$fn.push(this,'/')} icon='gongzuotai-shouye' />
							<div className='rel fx'>
								<LiComponent title='消息' onClick={()=>$fn.pushRoot(this,'/workbench/info') }  icon='gongzuotai-xiaoxi'/>
								{ +num ? <div className='abs_full' style={{pointerEvents: 'none'}}>
									<span className='abs f11 cf red tc r100px' style={{top: 4, left: 3.5, width: 30, height: 16, lineHeight: '16px', pointerEvents: 'none'}}>{num > 99 ? '99+' : num}</span>
								</div> : '' } 
							</div>
							<LiComponent title='设置' onClick={()=>$fn.pushRoot(this,'/workbench/set') } icon='gongzuotai-shezhi'/>
							{/* <LiComponent title='导航' /> */}
							<li className='fxmc c0 tap cp lh' style={{width:height}} onClick={()=>{window.lockRef.open()}} >
								<div><div className='fxmc mb5'><LockOutlined /></div><span>锁屏</span></div>
							</li>
							<li className='fxmc c0 tap cp lh' style={{width:height}} onClick={ e => {
								e.stopPropagation()
								$fn.msg.success('清除缓存成功')
								$fn.dataClear()
								$fn.refreshRouter()
							}}>
								<div><div className='fxmc mb5'><StopOutlined /></div><span>清缓</span></div>
							</li>
							<LiComponent title='退出' onClick={()=>{
								Confirm.then(f=> f('index/logout', { title:'退出登录', onOk:()=>{ $fn.remove('user');$fn.remove('api');$fn.replace(this,'/login')}}))
							}} icon='gongzuotai-shouye' />
						</ul>
					</header>
					<div className='rel ex'>
						<Router data={data} {...this.props}/>
					</div>
				</Page>
				
				{/* 危机值 */}
				<PositiveModal onRef={ref=>this.positiveModalRef=ref} onInit={this.getCritical} />
			</>
		)
	}
}

export default  withRouter(Frame)
